<template>
    <div class="topNav">
        <div class="topLeft">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liebiao"></use>
            </svg>
        </div>
        <div class="topCenter">
            <span class="navBtn" @click="$router.push('/Me')">我的</span>
            <span class="navBtn active">发现</span>
            <span class="navBtn">云村</span>
            <span class="navBtn">视频</span>
        </div>
        <div class="topright">
            <svg class="icon" aria-hidden="true"  @click="$router.push('/Search')">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
        </div>
    </div>
</template>

<script>
export default {

}
</script>
<style lang="less" scoped>
.topNav{
    width: 7.5rem;
    height: 0.8rem;
    display: flex;
    justify-content:space-between ;
    align-items: center;
    padding:0 0.20rem;
    .icon{
        width: 0.35rem;
        height: 0.35rem;
    }
    .topCenter{
        font-size: 0.24rem;
        width: 4.5rem;
        display: flex;
        justify-content: space-around;
        .active{
            font-weight: 900;
        }
    }
}
</style>